<template>
  <section class="relative w-full pb-0! md:pb-14 flex hidden! md:flex!">
    <div class="w-450px mr-10 flex flex-col items-center justify-center">
      <Title class="mb-0" :title="title" :content="content">
        <template #content>
          {{ content }}
          <div>
            <ul class="mt-2 text-[14px] md:text-[14px] text-left! inline-block mx-auto">
              <li class="list-inside-red mb-1" v-for="item in advertise">{{ item }}</li>
            </ul>
          </div>
        </template>
        <template #contentBottom>
          <EvaluateOther />
        </template>
      </Title>

      <div class="mx-4">
        <v-divider></v-divider>
      </div>
      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white" @click="handleClick" :href="btnLink" target="_blank">
        {{ btnText }}
      </v-btn>
    </div>
    <div class="min-w-[500px] flex-1 flex flex-col items-center w-full md:w-[calc(100%-450px)]">
      <Swiper :list="list" height="auto" :showBtn="false" :defaultAction="false">
        <template #default="{ data, index }">
          <div class="flex w-full">
            <img class="m-1 flex-1 w-0" alt="" v-img-auto v-for="item in data" :key="item" :src="item"></img>
          </div>
        </template>
      </Swiper>
    </div>
  </section>
</template>

<script setup lang="ts">
import EvaluateOther from '../evaluate/evaluateOther.vue';
import { Swiper } from '../swiper';
import { Title } from '../Title';

const props = withDefaults(defineProps<{
  images: string[]
  btnText: string
  btnLink: string
  title: string
  content: string
  advertise: string[] // 广告文案
}>(), {
})

const list = ref(splitIntoPairs(props.images ?? [], 2))
const handleClick = () => {
  return
  goPage(props.btnLink)
}

</script>